<template>
  <div class="function">
    <div style="padding:20px">
      <div>
        <span style="padding-right:30px">函数表达式: f(x) = {{fx}}</span>
        <el-button type="info" style="padding-right:20px" @click="functionDialog=true">编辑函数</el-button>
        <el-button type="success" @click="draw">运行</el-button>
      </div>
    </div>
    <div id="main" style="width:100%;height:500px;"></div>

    <el-dialog class="functionDialog" title="函数表达式定义" :visible.sync="functionDialog" width="70%" style="min-width:1050px">
      <!-- 函数表达式自定义 -->
      <div class="center_box">
        <div style="width:300px;margin:20px;width:30%">
          <el-tree :data="List" node-key="id" default-expand-all draggable :render-content="renderContent"
            @node-drag-start="handleDragStart" @node-drag-enter="handleDragEnter"
            @node-drag-leave="handleDragLeave" @node-drag-over="handleDragOver"
            @node-drag-end="handleDragEnd"  @node-drop="handleDrop">
          </el-tree>
        </div>
        <div style="margin-right:30px;margin-top:20px;width:70%">
          <div class="btnGroup" v-for="(item,index) in operatorBtn" :key="index">
            <el-button-group>
              <el-button v-for="(btn,index) in item.btn" :key="index"
              class="operateBtn" @click="addListData(btn,'other')">{{btn.name}}</el-button>
            </el-button-group>
            <el-input v-if="item.input" v-model="valueInput" class="valueInput" placeholder="值"></el-input>
            <el-button v-if="item.input" class="value_btn" @click="addListData({name:valueInput,value:valueInput},'other','isinput')">插入</el-button>
          </div>
          <div class="center_bottom_btn">
            <el-button-group style="margin-right:40px">
              <el-button type="info" :disabled="revocationDisabled" icon="el-icon-arrow-left" @click="Revocation">撤销</el-button>
              <el-button type="info" :disabled="advanceDisabled" @click="Advance">前进<i class="el-icon-arrow-right el-icon--right"></i></el-button>
            </el-button-group>
            <el-button type="danger" @click="clearAll">清除所有</el-button>
          </div>
        </div>
        
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="functionDialog = false;">取 消</el-button>
        <el-button type="primary" @click="functionDialog = false;">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import draggable from "vuedraggable";
export default {
  data(){
    return{
      fx:'',
      functionDialog:false,
      List:[],//储存被改掉的规则表达式
      editable: true, //托拉拽组件是否可用
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      operatorBtn:[//运算符数据
        { btn: [{name:'+',value:'+'},{name:'-',value:'-'},{name:'X',value:'*'},{name:'/',value:'/'},{name:'^',value:'^'}] },
        { btn: [{name:'sin',value:'sin'},{name:'cos',value:'cos'},{name:'tan',value:'tan'},{name:'cot',value:'cot'},{name:'csc',value:'csc'},{name:'sec',value:'sec'}] },
        { btn: [{name:'ln',value:'log'},{name:'e^',value:'exp'},{name:'绝对值',value:'abs'}] },
        { btn:[{name:'变量',value:'x'}], input:true }
      ],
      valueInput: "", //值
      revocation: [], //撤销存储
      advance: [], //前进存储
      revocationDisabled: true, //撤销是否禁用
      advanceDisabled: true, //前进是否禁用
    }
  },
  components:{draggable},
  created(){
    // this.$nextTick(()=>{
    //   this.draw()
		// })
  },
  methods:{
    func(x) {
      x /= 10;
      return Math.sin(x) * Math.cos(x * 2 + 1) * Math.sin(x * 3 + 2) * 50;
    },
    generateData() {
      let data = [];
      for (let i = -200; i <= 200; i += 0.1) {
          data.push([i, this.func(i)]);
      }
      return data;
    },
    draw(){
      var myChart = echarts.init(document.getElementById('main'));
      let option = {
        animation: false,
        grid: {
          top: 40,
          left: 50,
          right: 40,
          bottom: 50
        },
        xAxis: {
          name: 'x',
          minorTick: {
            show: true
          },
          minorSplitLine: {
            show: true
          }
        },
        yAxis: {
          name: 'y',
          min: -100,
          max: 100,
          minorTick: {
            show: true
          },
          minorSplitLine: {
            show: true
          }
        },
        dataZoom: [{
          show: true,
          type: 'inside',
          filterMode: 'none',
          xAxisIndex: [0],
          startValue: -20,
          endValue: 20
        }, {
          show: true,
          type: 'inside',
          filterMode: 'none',
          yAxisIndex: [0],
          startValue: -20,
          endValue: 20
        }],
        series: [
          {
            type: 'line',
            showSymbol: false,
            clip: true,
            data: this.generateData()
          }
        ]
      };
      myChart.setOption(option);
    },

    getFx(arr){
      arr.forEach(p => {
        if (p.value == 'x') {
          if (p.children.length!=0) {
            
          }else{

          }
        }
        if (p.value == 'sin') {
          
        }
        if (p.value == 'cos') {
          
        }
        if (p.value == 'tan') {
          
        }
        if (p.value == 'cot') {
          
        }
        if (p.value == 'csc') {
          
        }
        if (p.value == 'sec') {
          
        }
        if (p.value == 'log') {
          
        }
        if (p.value == 'exp') {
          
        }
        if (p.value == 'abs') {
          
        }
        if (p.value == '^') {
          
        }
        if (p.value == '+') {
          
        }
        if (p.value == '-') {
          
        }
        if (p.value == '*') {
          
        }
        if (p.value == '/') {
          
        }
      })
    },

    // 添加list内容
    addListData(item, code, type) {
      if (item.name != "" && item.name != null) {
        this.revocation.push([...this.List]);
        this.advance = [];
        this.revocationDisabled = false;
        this.advanceDisabled = true;
        this.List.push({
          id:Math.random().toString(36).substr(2),
          label: item.name,
          value: item.value,
          code:code,
          children:[]
        });
        if (type == "isinput") {
          this.valueInput = "";
        }
      } else {
        this.$message({ type: "error", message: "值不能为空" });
      }
    },
    handleDragStart(node, ev) {
      console.log('drag start', node);
    },
    handleDragEnter(draggingNode, dropNode, ev) {
      console.log('tree drag enter: ', dropNode.label);
    },
    handleDragLeave(draggingNode, dropNode, ev) {
      console.log('tree drag leave: ', dropNode.label);
    },
    handleDragOver(draggingNode, dropNode, ev) {
      console.log('tree drag over: ', dropNode.label);
    },
    handleDragEnd(draggingNode, dropNode, dropType, ev) {
      console.log('tree drag end: ', dropNode && dropNode.label, dropType);
    },
    handleDrop(draggingNode, dropNode, dropType, ev) {
      console.log('tree drop: ', dropNode.label, dropType);
    },
    remove(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex(d => d.id === data.id);
      children.splice(index, 1);
    },

    renderContent(h, { node, data, store }) {
      return (
        <span class="custom-tree-node">
          <span style="text-align:left">{node.label}</span>
          <span style="text-align:right;padding-left:50px">
            <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>删除节点</el-button>
          </span>
        </span>);
    },
    // 撤销
    Revocation() {
      this.advance.push([...this.List]);
      this.List = [...this.revocation[this.revocation.length - 1]];
      this.revocation.pop();
      this.advanceDisabled = false;
      if (this.revocation.length == 0) {
        this.revocationDisabled = true;
      }
    },
    // 前进
    Advance() {
      this.revocation.push([...this.List]);
      this.List = [...this.advance[this.advance.length - 1]];
      this.advance.pop();
      this.revocationDisabled = false;
      if (this.advance.length == 0) {
        this.advanceDisabled = true;
      }
    },
    // 清除所有
    clearAll() {
      if ( !(this.List == [] || this.List == "" || this.List == null )) {
        this.revocation.push([...this.List]);
        this.List = [];
        this.revocationDisabled = false;
      }
      this.advance = [];
      this.advanceDisabled = true;
    },

  },
  computed: {
    dragOptions() {
      return {
        animation: 0,
        group: "description",
        disabled: !this.editable,
        ghostClass: "ghost",
      };
    },
  },
}
</script>

<style lang="scss" scoped>
.function{
  height: 100%;
  background: #fff;
}
.functionDialog{
  .center_box{
    border:solid 2px #909399;
    border-radius:10px;
    margin-left:20px;
    margin-right:20px;
		display: flex;
		justify-content: space-between;
  }
  .btnGroup{
    text-align:center;
    margin-top:10px;
    .operateBtn {
      min-width: 65px;
      font-size: 15px;
      width: auto;
    }
    .valueInput{
      width:120px;
      margin-left:10px;
      ::v-deep .el-input__inner {
        border-radius: 4px 0 0 4px !important;
        border-right: none !important;
      }
    }
    .value_btn{
      width:65px;
      border-radius:0 4px 4px 0
    }
  }
  .center_bottom_btn{
    text-align:right;
    margin-top:20px;
    margin-right:5%;
    margin-bottom:60px
  }
}
.custom-tree-node {
  // flex: 1;
  // display: flex;
  // align-items: center;
  // justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>